<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            color: red;
        }

        a {
            color: green;
            text-decoration: none;
        }

        img {
            vertical-align: middle;
        }

        .image-container {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <!-- 文本标签 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <!-- 段落文本 -->
    <p>Web前端开发专业方向主要专注于PC端和移动端H5相应技术的全面运用，以解决企业在用户交互与前后端通信之间的关键问题。</p>
    <p>
        主要包括HTML5，CSS3，JavaScript，ES6规范，Node.js后台开发，JQuery，Bootstrap，VUE，React，微信小程序等框架的运用。实战项目丰富，涵盖主流行业的商业项目、大型电商网站的设计等等。
    </p>

    <!-- 简短文本 -->
    <span>简短文本1</span>
    <span>简短文本2</span>

    <!-- 粗体 -->
    <strong>字体加粗</strong>
    <b>字体加粗</b>

    <!-- 斜体 -->
    <em>字体倾斜</em>
    <i>字体倾斜</i>

    <!-- 表单内的文本标签 -->
    <label for="username">用户名</label>
    <input type="text" id="username">

    <label>密码</label>


    <!-- 表单标签 -->
    <form action="">
        <!-- 普通文本输入框 -->
        <input type="text">
        <!-- 密码 -->
        <input type="password">
        <!-- 单选框 -->
        <input type="radio" name="gender">
        <input type="radio" name="gender">
        <!-- 复选框 -->
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <!-- 下拉列表 -->
        <select>
            <option value="">四川</option>
            <option value="">云南</option>
            <option value="">贵州</option>
        </select>
        <!-- 文本域 -->
        <textarea rows="6"></textarea>
        <!-- 按钮 -->
        <input type="button" value="普通按钮">
        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">

        <button>提交按钮</button>
        <button type="button">普通按钮</button>
        <button type="reset">重置按钮</button>
    </form>



    <input type="date">
    <input type="range">
    <input type="color">



    <!-- 列表标签 -->
    <!-- 有序列表 -->
    <ol>
        <li>第一个列表项</li>
        <li>第二个列表项</li>
        <li>第三个列表项</li>
    </ol>
    <!-- 无序列表 -->
    <ul>
        <li>第一个列表项</li>
        <li>第二个列表项</li>
        <li>第三个列表项</li>
    </ul>
    <!-- 自定义列表 -->
    <dl>
        <dt>分组一</dt>
        <dd>第一个列表项</dd>
        <dd>第二个列表项</dd>

        <dt>分组二</dt>
        <dd>第一个列表项</dd>
        <dd>第二个列表项</dd>
    </dl>


    <div class="father">
        <span>简短文本</span>
        <p>段落标签</p>
        <a href="https://www.woniuxy.com">蜗牛学院</a>
    </div>

    <!-- 超链接 -->
    <a href="https://www.baidu.com" target="_blank" title="百度一下">百度一下</a>
    <a href="./02-家居首页布局.html">首页</a>
    <a href="./03-装饰摆件布局.html">装饰摆件</a>
    <a href="https://www.woniuxy.com">蜗牛学院</a>

    <!-- 图片 -->
    <img src="https://woniufile.oss-cn-hangzhou.aliyuncs.com/banner/PBET1banner.com.pc.jpg" alt="加载失败">
    <div class="image-container">
        <img src="./images/bz04.jpg" title="图片">
    </div>


    <audio src="./assets/b.wav" controls autoplay></audio>
    <video src="./assets/a.mp4" controls></video>

</body>

</html>